<template>
  <div class="box">
    <el-card shadow="never" class="search-box">
      <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容"
        :trigger-on-focus="true" @keydown.native.enter="bookSearch"></el-autocomplete>
      <el-button icon="el-icon-search" @click="bookSearch" circle></el-button>
      <el-button icon="el-icon-refresh" @click="bookRef" circle></el-button>
    </el-card>
    <el-empty description="没有此书哦" v-if="tableList.length === 0"></el-empty>
    <div class="grid-container">
      <div class="grid-item" v-for="item in tableList" :key="item.id">
        <div class="box_img">
          <img :src="item.url" alt="" />
        </div>
        <div class="box_actionBtn">
          <el-popover placement="top-start" title="" width="200" trigger="hover" :open-delay="800" :content="item.name">
            <el-tag type="info" slot="reference">
              {{ item.name }}
            </el-tag>
          </el-popover>

          <div class="actionBtn">
            <el-popconfirm title="确认借阅？" @confirm="borrowBtn(item.bookId, item.url)">
              <button slot="reference">借阅</button>
            </el-popconfirm>
          </div>
        </div>
        <div class="details">
          <div class="box_details name">
            <el-tag type="info">
              作者：
              {{ item.author }}
            </el-tag>
          </div>
          <div class="box_details bookInfo"></div>
          <div class="box_details synopsis">
            <el-popover placement="top-start" title="" width="500" trigger="hover" :open-delay="500"
              :content="item.introduction">
              <el-tag type="info" slot="reference">{{ item.introduction }}
              </el-tag>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="back_top" v-if="falg" @click="backTop">
      <div class="el-icon-top"></div>
    </div>
  </div>
</template>

<script>
import { getBookInfo, BookLend, getHotList } from "@/api/system/book";

export default {
  data() {
    return {
      a:null,
      params: {
        pageNum: 1,
        pageSize: 20,
        searchByName: "",
      },
      paramsLend: {
        bookId: 1,
      },
      tableList:[],
      tableData: [],
      total: 0,
      restaurants: [],
      state2: "",
      data: [],
      loading: false,
      falg: false,
    };
  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    //借阅方法
    borrowBtn(val, data) {
      console.log(data);
      this.paramsLend.bookId = val;
      BookLend(this.paramsLend).then(() => {
        this.$message({
          message: "恭喜你，借阅成功",
          type: "success",
        });
      });
    },
    //触底加载
    handleScroll() {
      var myscroll = document.documentElement;
      //检测触底
      if (
        Math.round(myscroll.scrollTop + myscroll.clientHeight + 0.5) >=
        myscroll.scrollHeight
      ) {
        //数据上限,结束函数
        if (this.total === this.tableData.length) {
          return;
        } else {
          this.params.pageNum +=2;
          this.a();
        }
      }
      if (myscroll.scrollTop > 2000) {
        this.falg = true;
      } else {
        this.falg = false;
      }
    },
    //全部书籍查询接口
    getBook() {
      getBookInfo(this.params).then((response) => {
        this.tableData = this.tableData.concat(response.rows);
        this.tableList=this.tableData
        this.total = response.total;
      });
    },
    //节流
    throttle(fn,delay){
      let time = null;
      return function(){
        if(!time){
          time = setTimeout(()=>{
            fn.apply(this,arguments);
            console.log(111)
            time = null;
          },delay)
        }
      }
},
    //重置搜索
    bookRef() {
      this.params.searchByName = "";
      this.state2="";
      this.getBook();
    },
    //图书搜索
    bookSearch() {
      this.params.searchByName = this.state2;
      getBookInfo(this.params).then((response) =>{
        this.tableList=response.rows;
      })
    },
    //搜索建议
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //热销书
    //热榜
    gethost() {
      getHotList().then((response) => {
        this.restaurants = response.rows.map((item) => {
          return { value: item.bookName };
        });
      });
    },
  },
  //
  created() {
    this.getBook(); //获取全部图书信息
    this.gethost();
    this.a=this.throttle(this.getBook,1000);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); //监听滚动事件
  },
};
</script>

<style>
.grid-container {
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 50px;
  padding: 20px;
}

.grid-item {
  position: relative;
  height: 250px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.actionBtn button {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  font-size: 0.8em;
  font-weight: 600;
  background: #66b1f6;
  color: #fff;
  cursor: pointer;
}

.box_actionBtn {
  position: absolute;
  width: 100%;
  bottom: 0px;
  border-top: 1px solid #c2c1c1;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.box_actionBtn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.search-box button {
  margin-left: 5px;
}

.details {
  transform: translateY(252px);
  /*252*/
  height: 150px;
  width: 100%;
  transition: 0.5s;
  background: white;
  opacity: 1;
}

.name {
  height: 37.6px;
}

.name .el-tag--medium {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.grid-item:hover .details {
  transform: translateY(59px);
}

.box_img {
  position: absolute;
  height: 210px;
  width: 100%;
  padding: 5px;
}

.box_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.back_top {
  width: 40px;
  height: 40px;
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  bottom: 10px;
  right: 10px;
  background: white;
  border-radius: 5px;
  padding: 5px;
}

.back_top:hover {
  cursor: pointer;
  background: rgb(235, 231, 231);
}

.box_details {
  padding: 5px 10px;
}

.synopsis {
  height: 90px;
  width: 100%;
}

.synopsis .el-tag--medium {
  height: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 需要显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.synopsis .el-tag {
  white-space: pre-wrap;
}

.box_actionBtn .el-tag {
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  /* 隐藏超出容器宽度的内容 */
  height: 100%;
}

.box_actionBtn .el-tag--medium {
  text-overflow: ellipsis;
}

.box_actionBtn button {
  height: 100%;
}

.back_top {
  font-size: 30px;
}
</style>
